<template>
    <div class="container" :class="isUpdate&&'fadeIn'">
        <figure class="senlin-container" v-if="isSenlin">
            <figcaption class="shop"></figcaption>
            <div v-for="(item,index) in content.answers" class="cell" :class="classArr[index]"
                 @click="answerHandler(item.order,item)">
                <img :src="addPrefixHost(item.image)" :class="trackArr.indexOf(item.order)>=0&&'active'"/>
            </div>
            <!--<figcaption class="yiyuan" @click="answerHandler(1)"-->
            <!--:class="trackArr.indexOf('1')>=0&&'active'"></figcaption>-->
            <!--<figcaption class="school" @click="answerHandler(2)"-->
            <!--:class="trackArr.indexOf('2')>=0&&'active'"></figcaption>-->
            <!--<figcaption class="canting" @click="answerHandler(4)"-->
            <!--:class="trackArr.indexOf('4')>=0&&'active'"></figcaption>-->
            <!--<figcaption class="cinema" @click="answerHandler(3)"-->
            <!--:class="trackArr.indexOf('3')>=0&&'active'"></figcaption>-->
        </figure>
        <figure class="home-container" v-else>
            <div v-for="(item,index) in content.answers" class="cell" :class="classArr[index]"
                 @click="answerHandler(item.order,item)">
                <img :src="addPrefixHost(item.image)" :class="trackArr.indexOf(item.order)>=0&&'active'"/>
            </div>
            <!--<figcaption class="table" @click="answerHandler(2)"-->
            <!--:class="trackArr.indexOf('2')>=0&&'active'"></figcaption>-->
            <!--<figcaption class="chair" @click="answerHandler(4)"-->
            <!--:class="trackArr.indexOf('4')>=0&&'active'"></figcaption>-->
            <!--<figcaption class="money" @click="answerHandler(1)"-->
            <!--:class="trackArr.indexOf('1')>=0&&'active'"></figcaption>-->
            <!--<figcaption class="television" @click="answerHandler(3)"-->
            <!--:class="trackArr.indexOf('3')>=0&&'active'"></figcaption>-->
        </figure>
    </div>

</template>
<script>
    import Vue from 'vue';
    import {mapState, mapGetters, mapActions} from 'vuex'
    import Component from 'vue-class-component'
    import R from 'ramda';
    import loadingImage from '~/components/loadingImage'

    @Component({
        components: {loadingImage},
        async fetch({store, params}) {
            await store.dispatch("index/exercise/index/setContentInfo", params);
        },
        computed: {
            ...mapState('index/exercise/index', {
                templateStyle: state => state.templateStyle,
                content: state => state.contentInfo ? state.contentInfo.content : {},
                contentInfo: state => state.contentInfo
            }),
        },
        methods: {
            ...mapActions('index/exercise/index', [
                'setAnswer',
                'setMyAnswer'
            ])
        },
        created() {
        },
        watch: {
            content() {
//                当数据发生变化后执行动画效果
                this.isUpdate = true;
                const initData = {
                    trackArr: [],
                    classArr: [],
                    selectArr: [],
                };
                const init = (val, key) => {
                    this[key] = val;
                };
                R.forEachObjIndexed(init)(initData);
                setTimeout(_ => {
                    this.isUpdate = false;
                }, 600);
                this.init();

            }
        },
    })
    export default class tapTourHeard extends Vue {
        isUpdate = false;
        trackArr = [];
        classArr = [];
        selectArr = [];

        init() {
            this.$nextTick(_ => {
                if (this.content.answerOrder) {
                    const getAnswerWord = item => R.or(R.prop('chinese'), R.prop('english'), R.prop('pinyin'))(item);
                    this.setAnswer({
                        answer: false,
                        msg: `${R.pipe(R.split(","), R.map(item => R.pipe(R.find(R.propEq('order', item)), getAnswerWord)(this.content.answers)))(this.content.answerOrder[0])}`
                    })
                }
                if (this.content.answers) {
                    for (let i = 0; i < this.content.answers.length; i++) {
                        this.classArr.push("cell-" + (i + 1));
                    }
                }
            })
        }

        get isSenlin() {
            return this.content.answerOrder && this.content.answerOrder[0] === '2,1,4,3';
        }

        mounted() {
            this.init();
        }

        answerHandler(order, item) {
            order = order + "";
            if (R.contains(order)(this.trackArr)) {
                const trackIndex = R.findIndex(R.equals(order))(this.trackArr);
                this.trackArr = R.remove(trackIndex, 1, this.trackArr);
                this.selectArr = R.remove(trackIndex, 1, this.selectArr);
            } else {
                this.trackArr = R.append(order)(this.trackArr);
                this.selectArr = R.append(item.english || item.chinese)(this.selectArr);
            }
            this.setMyAnswer(this.selectArr.join(","));
            this.checkAnswer();
        }


        checkAnswer() {
            const answer = R.pipe(R.split(","), R.equals(this.trackArr))(this.content.answerOrder[0]);
            const getAnswerWord = item => R.or(R.prop('chinese'), R.prop('english'), R.prop('pinyin'))(item);
            this.setAnswer({
                answer,
                msg: `${R.pipe(R.split(","), R.map(item => R.pipe(R.find(R.propEq('order', item)), getAnswerWord)(this.content.answers)))(this.content.answerOrder[0])}`
            })
        }
    }
</script>
<style lang="scss" scoped>
    @import "~~assets/sass/mixins";

    .fadeIn {
        animation: fadeIn .4s ease-in;
        transform: translateZ(0);
    }

    @keyframes fadeIn {
        from {
            transform-origin: left;
            transform: scaleX(.4);
            opacity: 0;
        }
    }

    .home-container {
        $percent: 0.7;
        @function multiplicationWithNum($num) {
            @return $num * $percent;
        }
        @include exerciseContainer((width:(1120px), height:(516px)), multiplicationWithNum(1120px), 'pintu/home.png');
        margin-top: 60px;
        position: relative;
        .cell {
            img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .cell-2 {
            /*<!--@include exerciseContainer((width:(88px), height:(105px)), multiplicationWithNum(88px), 'pintu/table.png');-->*/
            position: absolute;
            left: 34%;
            top: 25%;
            width: 0.65rem;
            height: .65rem;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
        }
        .cell-3 {
            /*<!--@include exerciseContainer((width:(109px), height:(182px)), multiplicationWithNum(109px), 'pintu/chair.png');-->*/
            position: absolute;
            height: 1.4rem;
            top: 40%;
            left: 27.5%;
            width: 1rem;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
        }
        .cell-1 {
            /*<!--@include exerciseContainer((width:(102px), height:(31px)), multiplicationWithNum(102px), 'pintu/money.png');-->*/
            position: absolute;
            left: 62%;
            top: 66%;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
            width: 102px;
            height: 31px;
        }
        .television {
            @include exerciseContainer((width:(54px), height:(43px)), multiplicationWithNum(54px), 'pintu/television.png');
            position: absolute;
            left: 36%;
            top: 34%;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
        }
        .active {
            filter: drop-shadow(6px 2px 2px purple);
        }
    }

    .senlin-container {
        $percent: 0.6;
        @function multiplicationWithNum($num) {
            @return $num * $percent;
        }
        @include exerciseContainer((width:(1366px), height:(599px)), multiplicationWithNum(1366px), 'pintu/senlin.png');
        margin-top: 60px;
        position: relative;
        .cell {
            img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
        }
        .cell-1 {
            /*<!-- @include exerciseContainer((width:(204 px), height:(204 px)), multiplicationWithNum(204 px), 'pintu/yiyuan.png');  --> position: absolute;*/
            position: absolute;
            width: 1.44rem;
            height: 1.44rem;
            top: 50%;
            left: 78%;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
        }
        .shop {
            @include exerciseContainer((width:(165px), height:(158px)), multiplicationWithNum(165px), 'pintu/shop.png');
            position: absolute;
            left: 38.89%;
            top: 37.4%;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
        }
        .cell-3 {
            /*<!-- @include exerciseContainer((width:(229 px), height:(178 px)), multiplicationWithNum(229 px), 'pintu/canting.png');  --> */
            position: absolute;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
            left: 13.8%;
            top: 61%;
            width: 1.39rem;
            height: 1.2rem;
        }
        .cell-4 {
            /*<!-- @include exerciseContainer((width:(219 px), height:(216 px)), multiplicationWithNum(219 px), 'pintu/cinema.png');  --> */
            position: absolute;
            cursor: pointer;
            filter: drop-shadow(2px 2px 2px black);
            left: 64%;
            top: -13%;
            width: 1.4rem;
            height: 1.2rem;
        }
        .cell-2 {
            /*<!-- @include exerciseContainer((width:(309 px), height:(174 px)), multiplicationWithNum(309 px), 'pintu/school.png');  --> */
            position: absolute;
            left: 15.8%;
            top: -10%;
            cursor: pointer;
            filter: drop-shadow(.02rem .02rem .02rem black);
            width: 1.8rem;
            height: 1.2rem;
        }
        .active {
            filter: drop-shadow(6px 2px 2px purple);
        }
    }
</style>